<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/mine.css" rel="stylesheet">
    <style type="text/css">
        .col-sm-3 {
            width: 118px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row table_box" id="main">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑图书</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="form_basic.html#">选项1</a>
                            </li>
                            <li><a href="form_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link" href="javascript:window.location.replace('book.html');">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">书名：</label>
                            <div class="col-sm-8">
                                <input id="username" name="username" class="form-control" type="text" v-model="dataForm.Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">价格：</label>
                            <div class="col-sm-8">
                                <input id="price" name="price" class="form-control" type="number" v-model="dataForm.Price">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">作者：</label>
                            <div class="col-sm-8">
                                <input id="author" name="author" class="form-control" type="text" v-model="dataForm.Author">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">出版社：</label>
                            <div class="col-sm-8">
                                <input id="source" name="source" class="form-control" type="text" v-model="dataForm.MakeSource">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">分类：</label>
                            <div class="col-sm-8">
                                <label class="mr_10" :for="item.Id" v-for="item of categoryList" :key="item.Id">
                                    <input type="radio" v-model="dataForm.BookCategoryId" :value="item.Id" :id="item.Id"> {{item.Name}} 
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">库存：</label>
                            <div class="col-sm-8">
                                <input id="inventory" name="inventory" class="form-control" type="number" v-model="dataForm.Inventory">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态：</label>
                            <div class="col-sm-8">
                                <label class="mr_10" for="status1">
                                    <input type="radio" v-model="dataForm.IsSoldOut" value="0" id="status1"> 正常
                                </label>
                                <label class="mr_10" for="status2">
                                        <input type="radio" v-model="dataForm.IsSoldOut" value="1" id="status2"> 已下架
                                    </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/content.min.js"></script>
    <script src="js/plugins/validate/jquery.validate.min.js"></script>
    <script src="js/plugins/validate/messages_zh.min.js"></script>
    <script src="js/demo/form-validate-demo.min.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="js/pack.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script type="text/javascript">
    var vm = new Vue({
        data: {
            dataForm: {
                Name: '',
                Price: '',
                Author: '',
                MakeSource: '',
                BookCategoryId: 1,
                Inventory: '',
                IsSoldOut: 0
            },
            categoryList: [],
            editID: ''
        },
        mounted () {
            var e = "<i class='fa fa-times-circle'></i> ";
            $("#signupForm").validate({
                rules: {
                    username: { required: !0 },
                    price: { required: !0 },
                    author: { required: !0 },
                    source: { required: !0 },
                    category: { required: !0 },
                    inventory: { required: !0 },
                    status: { required: !0 }
                }, messages: {
                    username: { required: e + "请输入您的用户名", },
                    price: { required: e + "请输入价格", },
                    author: { required: e + "请输入作者", },
                    source: { required: e + "请输入出版社", },
                    category: { required: e + "请选择分类", },
                    inventory: { required: e + "请输入库存", },
                    status: { required: e + "请选择状态",  }
                },
                submitHandler:  (form) => {
                    this.saveData();
                },
                invalidHandler: (form, validator) => {
                    return false;
                }
            });

            this.editID = pack.getQueryString('id');
            if (this.editID) {
                pack.http('GET', 'http://localhost:7002/v1/book/getBookById', { Id: this.editID }, (res, err) => {
                    const result = res.results;
                    this.dataForm = result;
                });
            }
            this.getData();
        },
        methods: {
            getData () {
                pack.http('GET', 'http://localhost:7002/v1/book/getBookCategorys', {}, (res, err) => {
                    const result = res.results;
                    this.categoryList = result;
                });
            },
            saveData () {
                if (this.editID) {
                    const data = JSON.parse(JSON.stringify(this.dataForm));
                    data.Price = Number(data.Price).toFixed(2);
                    data.Inventory = Number(data.Inventory);
                    data.BookCategoryId = Number(data.BookCategoryId);
                    data.IsSoldOut = Boolean(data.IsSoldOut);
                    pack.http('POST', 'http://localhost:7002/v1/book/editBook', data, (res, err) => {
                        swal("修改成功", "", "success");
                    });
                } else {
                    const data = JSON.parse(JSON.stringify(this.dataForm));
                    data.Price = Number(data.Price).toFixed(2);
                    data.Inventory = Number(data.Inventory);
                    data.BookCategoryId = Number(data.BookCategoryId);
                    data.IsSoldOut = Boolean(data.IsSoldOut);
                    pack.http('PUT', 'http://localhost:7002/v1/book/addBook', data, (res, err) => {
                        swal("添加成功", "", "success");
                    });
                }
            }
        }
    }).$mount("#main");
</script>

</html>